<template>
	<view class="share_ggb">
		<view class="status_bar"></view>
		<view class="share_her">
			<view class="share_me">
				<view class="share_konn"></view>
				<view class="shere_uid">{{userInfo.nickname}}</view>
			</view>
			<view class="sharemym">
				<view class="share_sys">
					<uqrcode ref="qrcode" canvas-id="qrcode" :value="value" :size="size">
					  <template v-slot:loading>
						<text style="color: green;">loading...</text>
					  </template>
					</uqrcode>
				</view>
				<view class="share_yao">
					<view class="shum">
						<view class="shum_one">
							我的邀请码:
						</view>
						<view class="shum_tow">
							{{userInfo.inviteCode}}
						</view>
					</view>
					<view class="yaobut" @click="butClick">
						复制邀请码
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { API_BASE_URL} from '@/utils/appConfig.js';
	import {memberInfo} from '@/api/user.js';
	export default{
		onLoad() {
			memberInfo().then(response=>{
				this.userInfo = response.data;
				console.log(this.userInfo)
				//szqkj.xyz
				// this.value ='http://'+window.location.hostname+'/#/pages/user/register?inviteId='+this.userInfo.inviteCode
				this.value ='https://wuxueqz.com/#/pages/user/register?inviteId='+this.userInfo.inviteCode
				console.log(this.value);
			});
			
		},
		data(){
			return{
				userInfo:{},
				size:85,
				value:''
			}
		},
		methods:{
			butClick(){
				uni.setClipboardData({
					data: this.userInfo.inviteCode,
					success: function () {
						console.log('success');
					}
				});
			}
		},
		mounted() {
			this.$refs.qrcode.make({
			  success: () => {
			    console.log('生成成功');
				console.log(this.value);
			  },
			  fail: err => {
			    console.log(err)
				console.log(this.value);
			  }
			});
		}
	}
</script>

<style>
	.share_ggb{
	    background-image: url(/static/img/user/fenxiang_bg.png);
	    background-size: 100% 100%;
	    height: 100%;
	    height: 100vh;
	    background-repeat: no-repeat;
	}
	.status_bar{
	    height: 80px;
	    width: 100%;
	}
	.share_her{
	    width: 70%;
	    margin: auto;
	    height: 426px;
	    background: hsla(0, 0%, 100%, .4);
	    background-size: 100% 100%;
	    flex-direction: column;
	    display: flex;
	    justify-content: space-between;
	    border-radius: 10px;
	}
	.share_me {
	    width: 100%;
	    text-align: center;
	}
	.share_konn {
	    height: 26px;
	}
	.shere_uid {
	    display: inline-block;
	    font-size: 14px;
	    font-weight: 700;
	    background: hsla(0, 0%, 100%, .8);
	    padding: 2px 4px 2px 4px;
	    border-radius: 4px;
	}
	.sharemym{
	    background-color: #fff;
	    width: 60%;
	    margin: auto;
	    text-align: center;
	    border-radius: 10px;
	    justify-content: space-around;
	    padding: 21px;
	}
	.share_sys{
	    margin-bottom: 14px;
	}
	.share_sys .uqrcode{
	    display: inline-block;
	    width: 85px;
	    height: 85px;
	}
	.share_yao {
	    text-align: center;
	}
	.shum {
	    margin-bottom: 10px;
	}
	.shum_one {
	    font-size: 14px;
	    color: #dd6869;
	}
	.shum_tow{
	    font-size: 17px;
	    font-weight: 700;
	}
	.yaobut{
	    background-color: #dd6869;
	    border-radius: 26px;
	    font-size: 14px;
	    color: #fff;
	    padding: 7px;
	}
</style>